<form id="examForm" class="layui-form">
<div id="exam" style="margin: 30px">
    <div id="type" style="text-align: left;font-size: 16px;font-weight: bold"></div>
    <hr/>

    <div class="layui-form-item">
        <label id="number" class="layui-form-label"></label>
        <div class="layui-input-block">
            <textarea id="questionTitle"  autoHeight="true" class="layui-textarea" readonly></textarea>
        </div>
    </div>
    <div class="layui-form-item" hidden>
        <div class="layui-input-block">
            <textarea id="questionId"  name="quesid" autoHeight="true" class="layui-textarea" readonly></textarea>
        </div>
    </div>
    <div id="optionADiv" class="layui-form-item " pane="">
        <label class="layui-form-label">A、</label>
        <div class="layui-input-block">
            <input id="optionA" type="checkbox" name="optionA" lay-skin="primary" >
        </div>
    </div>
    <div id="optionBDiv" class="layui-form-item" pane="">
        <label class="layui-form-label">B、</label>
        <div class="layui-input-block">
            <input id="optionB" type="checkbox" name="optionB" lay-skin="primary" >
        </div>
    </div>
    <div id="optionCDiv" class="layui-form-item" pane="">
        <label class="layui-form-label">C、</label>
        <div class="layui-input-block">
            <input id="optionC" type="checkbox" name="optionC" lay-skin="primary" >
        </div>
    </div>
    <div id="optionDDiv" class="layui-form-item" pane="">
        <label class="layui-form-label">D、</label>
        <div class="layui-input-block">
            <input id="optionD" type="checkbox" name="optionD" lay-skin="primary" >
        </div>
    </div>
    <div id="answerDiv" class="layui-form-item">
        <label  class="layui-form-label">答案</label>
        <div class="layui-input-block">
            <textarea id="answer"  name="answer" class="layui-textarea" ></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block model-form-footer">
            <button class="layui-btn layui-btn-danger" lay-submit lay-filter="saveBtn">交卷</button>
            <button id="nextBtn" class="layui-btn " lay-submit lay-filter="next" >下一题</button>
        </div>
    </div>
    <hr/>
    <div id="questionNum" style="display: flex;flex-wrap: wrap;margin-top: 40px"></div>
</div>
</form>
<style>
    #exam > div {
        margin-top: 20px;
    }

    #option > div {
        margin-top: 20px;
    }
</style>
<script>
    questionNum=0;
    questionId=[];
    questionAnswer=[];
    paperData=null;
    layui.use(['index', 'form','config', 'admin', 'layer'], function () {
        var admin = layui.admin;
        var form = layui.form;
        var index = layui.index;
        var config = layui.config;
        var layer = layui.layer;

        let userid;
        index.getUser(function (user) {
            userid=user.id;
        })
        var tempData = admin.getTempData("paper_data");

        admin.req("api-exam/examPaper/findPaperQue", {expaid: tempData.expaid}, function (res) {
            let data = res.data;
            paperData=data;
            // for (let i = 0; i < data.length; i++) {
            //     $("#questionNum").append(
            //         '<button id="numBtn' + i + '" class="layui-btn layui-btn-primary" ' +
            //         'onclick="chooseNum(this)">' + (i + 1) + '</button>')
            // }
            showInfo(data);
            form.render()
        }, "get");
        //下一题
        form.on("submit(next)", function (data) {
            let answer=data.field;
            intoArr(answer);
            questionNum++;
            changeBtn(questionNum,paperData.length-1);
            showInfo(paperData);
            $("#optionA,#optionB,#optionC,#optionD").prop("checked",false);
            $("#answer").val("");
            form.render();
            return false;
        });

        //交卷
        form.on("submit(saveBtn)",function (data) {
            let lastData=data.field;
            if(questionAnswer.length<paperData.length){
                intoArr(lastData);
            }
            let param={
                expaid:tempData.expaid,
                userid:userid,
                questionId:questionId,
                questionAnswer:questionAnswer,
                access_token:config.getToken().access_token
            };
            console.log(param);

            $.ajax({
                type: 'post',
                url: config.base_server+"api-exam/exam/answer",
                data: param,
                async: false, //同步
                dataType: 'json',
                xhrFields: {
                    withCredentials: true //允许跨域带Cookie
                },
                success: function(res) {
                    layer.msg(res.msg())
                }
            });
        })
    });
    //答案放入数组中
    function intoArr(data) {
        questionId.push(data.quesid); //将考题id放入数组
        let option=data.answer;
        if(data.optionA!=undefined){
            option+='A';
        }
        if(data.optionB!=undefined){
            option+='B';
        }
        if(data.optionC!=undefined){
            option+='C';
        }
        if(data.optionD!=undefined){
            option+='D';
        }
        questionAnswer.push(option);
        console.log(questionAnswer[questionNum])
    }
    //选择
    function chooseNum(obj) {
        questionNum=$(obj).html()-1;
        showInfo(paperData);
        return false;
    }
    //改变下一题按钮的颜色
    function changeBtn(currNum, totalNum) {
        if(currNum>=totalNum){   //最后一题
            $("#nextBtn").attr("disabled",true)
            $("#nextBtn").attr("class","layui-btn layui-btn-primary")
        }else{
            $("#nextBtn").attr("class","layui-btn")
        }
    }
    //显示题信息
    function showInfo(data){
        $("#questionId").val(data[questionNum].quesid);
        $("#type").html("[" + data[questionNum].tpname + "]");
        $("#number").html(questionNum+1+"、");
        $("#questionTitle").val(data[questionNum].qtitle);
        if(data[questionNum].tpname.search('选')!=-1){
            $("#optionA").attr("title",data[questionNum].optioA);
            $("#optionB").attr("title",data[questionNum].optioB);
            $("#optionC").attr("title",data[questionNum].optioC);
            $("#optionD").attr("title",data[questionNum].optioD);
            $("#answerDiv").attr("hidden",true);
            $("#optionADiv,#optionBDiv,#optionCDiv,#optionDDiv").attr("hidden",false)
        }else {
            $("#answerDiv").attr("hidden",false);
            $("#optionADiv,#optionBDiv,#optionCDiv,#optionDDiv").attr("hidden",true)
        }
    }
    //textarea高度自适应
    $(function () {
        $.fn.autoHeight = function () {
            function autoHeight(elem) {
                elem.style.height = 'auto';
                elem.scrollTop = 0; //防抖动
                elem.style.height = elem.scrollHeight + 5 + 'px';
            }

            this.each(function () {
                autoHeight(this);
                $(this).on('keyup', function () {
                    autoHeight(this);
                });
            });
        }
        $('textarea[autoHeight]').autoHeight();
    })
</script>